<!-- <!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>数字化面粉车间监测系统</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
        }

        .mainbox {
            padding: 20px;
        }

        .nav1 {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
        }

        .nav1 .box {
            padding: 20px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .tit {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .yqlist {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .yqlist ul {
            display: flex;
            justify-content: space-around;
            width: 100%;
            padding: 0;
        }

        .yqlist li {
            list-style: none;
            text-align: center;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .yqlist .yq {
            font-size: 18px;
            margin: 60px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .yqlist .yq span {
            font-size: 20px;
            margin-bottom: 10px;
        }

                .charts-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
        }

        .chart-box {
            width: 48%;
            height: 300px;
            min-width: 200px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="head clearfix">
        <h1 class="pulll_left">数字化面粉车间监测系统</h1>
        <div class="menu menu2 pulll_left">
            <ul>
                <li><a href="./index.html">数据采集</a></li>
                <li><a href="./control.html">设备控制</a></li>
            </ul>
        </div>
        <div class="time" id="showTime">2024/6/11 15:00:12</div>
    </div>
    <div class="mainbox">
        <ul class="clearfix nav1">
            <li style="width: 70%">
                <div class="box">
                    <div class="tit">数据采集</div>
                    <div class="boxnav" style="height: 330px;">
                        <div class="yqlist">
                            <ul class="clearfix">
                                <li>
                                    <div id="temperature" class="yq">
                                        <img src="images/temp.png" alt="温度">
                                        <span>温度</span>
                                        <div>--</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="yq" id="humidity">
                                        <img src="images/shidu.png" alt="湿度">
                                        <span>湿度</span>
                                        <div>--</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="yq" id="personnelcount">
                                        <img src="images/people.png" alt="人员计数">
                                        <span>人员计数</span>
                                        <div>--</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="yq" id="dustconcentration">
                                        <img src="images/fenc.png" alt="粉尘浓度">
                                        <span>粉尘浓度</span>
                                        <div>--</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="yq" id="pipelinewindpressure">
                                        <img src="images/pipe.png" alt="管道风压">
                                        <span>管道风压</span>
                                        <div>--</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            <li style="width: 30%">
                <div class="box">
                    <div class="tit">视频监控</div>
                    <div class="boxnav" id="echart6" style="height: 330px;"></div>
                </div>
            </li>
        </ul>
               <ul class="clearfix nav1">
                <li style="width: 100%">
                    <div class="box" style="width: 100%">
                        <div class="tit">历史数据</div>
                        <div class="boxnav" style="height: auto;">
                            <div class="charts-container">
                                <div id="echart1" class="chart-box"></div>
                                <div id="echart2" class="chart-box"></div>
                                <div id="echart3" class="chart-box"></div>
                                <div id="echart4" class="chart-box"></div>
                                <div id="echart5" class="chart-box"></div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
    </div>

    <script>
        function initChart(chartId, title, data) {
    var chart = echarts.init(document.getElementById(chartId));
    var option = {
        title: {
            text: title
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: categories,
            axisPointer: {
                type: 'shadow' // 设置为 shadow 可以启用阴影的拖拽效果
            }
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [ // 设置数据缩放
            {
                type: 'inside', // 内置数据缩放组件
                start: 0,
                end: 100
            },
            {
                show: true, // 底部滚动条组件
                type: 'slider',
                start: 0,
                end: 100
            }
        ],
        series: [{
            data: data,
            type: 'line'
        }]
    };
    chart.setOption(option);
}


        $(document).ready(function () {
              // 假数据
            var categories = ['2024-06-11 15:00:00', '2024-06-11 15:01:00', '2024-06-11 15:02:00', '2024-06-11 15:03:00', '2024-06-11 15:04:00'];
            var temperatureData = [22, 23, 21, 24, 25];
            var humidityData = [55, 54, 56, 53, 52];
            var personnelData = [5, 6, 5, 7, 6];
            var dustData = [30, 40, 35, 45, 50];
            var windPressureData = [10, 12, 11, 13, 12];

            // 初始化每个图表
            function initChart(chartId, title, data) {
                var chart = echarts.init(document.getElementById(chartId));
                var option = {
                    title: {
                        text: title
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: categories
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data,
                        type: 'line'
                    }]
                };
                chart.setOption(option);
            }

            initChart('echart1', '温度', temperatureData);
            initChart('echart2', '湿度', humidityData);
            initChart('echart3', '人员计数', personnelData);
            initChart('echart4', '粉尘浓度', dustData);
            initChart('echart5', '管道风压', windPressureData);

            // 页面加载后立即获取并更新数据
            updateData();

            // 每隔1秒更新一次数据
            setInterval(updateData, 3000);
            function updateData() {
                var req;
                var v1 = document.getElementById("temperature");  // 获取人员计数的元素
                var v2 = document.getElementById("humidity");  // 获取人员计数的元素
                var v3 = document.getElementById("personnelcount");  // 获取人员计数的元素
                var v4 = document.getElementById("dustconcentration"); // 获取粉尘浓度的元素
                var v5 = document.getElementById("pipelinewindpressure"); // 获取管道风压的元素
                var xhr = new XMLHttpRequest(); // 创建对象
                var url = ""; // 替换为实际的服务器端点

                xhr.open("POST", url, true); // 配置请求
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置请求头

                xhr.onreadystatechange = function () { // 检测状态是否发生变化
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        req = xhr.responseText.split(" "); // 响应正文
                        v1.querySelector('div').innerText = req[0];
                        v2.querySelector('div').innerText = req[1];
                        v3.querySelector('div').innerText = req[2];
                        v4.querySelector('div').innerText = req[3];
                        v5.querySelector('div').innerText = req[4];
                    } else if (xhr.readyState === 4) {
                        console.error("请求失败，状态码：" + xhr.status);
                    }
                }
                xhr.send("list"); // 向网页服务器发送请求
            
            }

        });

            // 示例：更新历史数据图表
            function updateHistoryChart(historyData) {
                var myChart = echarts.init(document.getElementById('echart2'));
                var option = {
                    title: {
                        text: '历史数据'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['温度', '湿度']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: historyData.labels // 使用服务器发送的标签数据
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '温度',
                            type: 'line',
                            stack: '总量',
                            data: historyData.temperatureData // 使用服务器发送的温度数据
                        },
                        {
                            name: '湿度',
                            type: 'line',
                            stack: '总量',
                            data: historyData.humidityData // 使用服务器发送的湿度数据
                        }
                    ]
                };
                myChart.setOption(option);
            }

    </script>
</body>

</html> -->


<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>数字化面粉车间监测系统</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #007bff;
            color: white;
            transform: translateY(-90px);
            animation: headAnimation 0.5s linear forwards;
            padding: 10px 20px;
        }

        @keyframes headAnimation {
            0% {
                transform: translateY(-90px);
            }

            45% {
                transform: translateY(-40px);
            }

            75% {
                transform: translateY(-20px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .mainbox {
            padding: 20px;
        }

        .nav1 {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
        }

        .nav1 .box {
            padding: 20px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            transform: translateY(0);
            background-color: white;
            transition: all 0.3s ease-in-out;
            box-shadow: none;
        }

        .nav1 .box:hover .tit {
            border-bottom: 1px solid rgba(7, 118, 181, .7);
        }

        .nav1 .box:hover {
            transform: translateY(-5px);
            box-shadow: 0px 0px 16px -9px #315efb;
        }

        .tit {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .yqlist {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .yqlist ul {
            display: flex;
            justify-content: space-around;
            width: 100%;
            padding: 0;
        }

        .yqlist li {
            list-style: none;
            text-align: center;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .yqlist .yq {
            font-size: 18px;
            margin: 60px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .yqlist .yq span {
            font-size: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .charts-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
        }

        .chart-box {
            width: 48%;
            height: 300px;
            min-width: 200px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="head clearfix">
        <h1 class="pulll_left">数字化面粉车间监测系统</h1>
        <div class="menu menu2 pulll_left">
            <ul>
                <li><a href="./index.html">数据采集</a></li>
                <li><a href="./control.html">设备控制</a></li>
            </ul>
        </div>
        <div class="time" id="showTime">2024/6/11 15:00:12</div>
    </div>
    <div class="mainbox">
        <ul class="clearfix nav1">
            <li style="width: 70%">
                <div class="box">
                    <div class="tit">数据采集</div>
                    <div class="boxnav" style="height: 330px;">
                        <div class="yqlist">
                            <ul class="clearfix">
                                <li>
                                    <div id="temperature" class="yq" data-index="0">
                                        <img src="images/temp.png" alt="温度">
                                        <span>温度</span>
                                        <div>--</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="yq" id="humidity" data-index="1">
                                        <img src="images/shidu.png" alt="湿度">
                                        <span>湿度</span>
                                        <div>--</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="yq" id="personnelcount" data-index="2">
                                        <img src="images/people.png" alt="人员计数">
                                        <span>人员计数</span>
                                        <div>--</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="yq" id="dustconcentration" data-index="3">
                                        <img src="images/fenc.png" alt="粉尘浓度">
                                        <span>粉尘浓度</span>
                                        <div>--</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="yq" id="pipelinewindpressure" data-index="4">
                                        <img src="images/pipe.png" alt="管道风压">
                                        <span>管道风压</span>
                                        <div>--</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            <li style="width: 30%">
                <div class="box">
                    <div class="tit">视频监控</div>
                    <div class="boxnav" id="echart6" style="height: 330px;">
                        <img src="http://192.168.119.128:8080/?action=stream" alt="" style="height: 320px;width: 460px;">
                    </div>
                </div>
            </li>
        </ul>
        <ul class="clearfix nav1">
            <li style="width: 100%">
                <div class="box" style="width: 100%">
                    <div class="tit">历史数据</div>
                    <div class="boxnav" style="height: 600px;">
                        <div class="carousel">
                            <div class="carousel-inner" id="chartSlide">
                                <div class="carousel-item" style="display: block;">
                                    <div id="echart1" class="chart-box" style="width: 1200px ;height: 550px;"></div>
                                </div>
                                <div class="carousel-item" style="display: none;">
                                    <div id="echart2" class="chart-box" style="width: 1200px ;height: 550px;"></div>
                                </div>
                                <div class="carousel-item" style="display: none;">
                                    <div id="echart3" class="chart-box" style="width: 1200px ;height: 550px;"></div>
                                </div>
                                <div class="carousel-item" style="display: none;">
                                    <div id="echart4" class="chart-box" style="width: 1200px ;height: 550px;"></div>
                                </div>
                                <div class="carousel-item" style="display: none;">
                                    <div id="echart5" class="chart-box" style="width: 1200px ;height: 550px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <script>
        var categories = []; // 全局定义 categories
        function initChart(chartId, title, categories, data) {
            var chart = echarts.init(document.getElementById(chartId));
            var option = {
                title: {
                    text: title
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [title]
                },
                xAxis: {
                    type: 'category',
                    data: categories
                },
                yAxis: {
                    type: 'value'
                },
                dataZoom: [{
                    type: 'slider',
                    start: 0,
                    end: 100
                }, {
                    type: 'inside',
                    start: 0,
                    end: 100
                }],
                series: [{
                    name: title,
                    type: 'line',
                    data: data
                }]
            };
            chart.setOption(option);
            return chart;
        }

        $(document).ready(function () {
             // 页面加载后立即获取并更新数据
             updateData_tu();
            // 每隔3秒更新一次数据
            setInterval(updateData_tu, 2000);


            function updateData_tu() {
                console.log("图形刷新啦！");
                var xhr = new XMLHttpRequest(); // 创建对象
            var url = ""; // 替换为实际的服务器端点

            xhr.open("POST", url, true); // 配置请求
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置请求头

            xhr.onreadystatechange = function () { // 检测状态是否发生变化
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    var data = response.data;

                    function convertTimestamps(timestamps) {
                        let convertedArray = [];
                        for (let i = 0; i < timestamps.length; i++) {
                            let ts = timestamps[i];
                            if (typeof ts !== 'number') {
                                console.error(`Element at index ${i} is not a number:`, ts);
                                continue;
                            }
                            // 转换为毫秒时间戳
                            let date = new Date(ts * 1000);
                            let formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
                            convertedArray.push(formattedDate);
                        }
                        return convertedArray;
                    }

                    categories_301 = data["301"].map(item => item.time);
                    categories_301 = convertTimestamps(categories_301);
                    categories_302 = data["302"].map(item => item.time);
                    categories_302 = convertTimestamps(categories_302);
                    categories_101 = data["101"].map(item => item.time);
                    categories_101 = convertTimestamps(categories_101);
                    categories_102 = data["102"].map(item => item.time);
                    categories_102 = convertTimestamps(categories_102);
                    categories_103 = data["103"].map(item => item.time);
                    categories_103 = convertTimestamps(categories_103);

                    var temperatureData = data["302"].map(item => item.val);
                    var humidityData = data["301"].map(item => item.val);
                    var personnelData = data["101"].map(item => item.val);
                    var dustData = data["102"].map(item => item.val);
                    var windPressureData = data["103"].map(item => item.val);

                    initChart('echart1', '温度', categories_302, temperatureData);
                    initChart('echart2', '湿度', categories_301, humidityData);
                    initChart('echart3', '人员计数', categories_101, personnelData);
                    initChart('echart4', '粉尘浓度', categories_102, dustData);
                    initChart('echart5', '管道风压', categories_103, windPressureData);
                } else if (xhr.readyState === 4) {
                    console.error("请求失败，状态码：" + xhr.status);
                }
            }
            xhr.send("history"); // 向网页服务器发送请求

            }


            // 页面加载后立即获取并更新数据
            updateData();
            // 每隔3秒更新一次数据
            setInterval(updateData, 2000);

            function updateData() {
                var req;
                var v1 = document.getElementById("temperature");  // 获取温度的元素
                var v2 = document.getElementById("humidity");  // 获取湿度的元素
                var v3 = document.getElementById("personnelcount");  // 获取人员计数的元素
                var v4 = document.getElementById("dustconcentration"); // 获取粉尘浓度的元素
                var v5 = document.getElementById("pipelinewindpressure"); // 获取管道风压的元素

                var xhr = new XMLHttpRequest(); // 创建对象
                var url = ""; // 替换为实际的服务器端点

                xhr.open("POST", url, true); // 配置请求
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置请求头

                xhr.onreadystatechange = function () { // 检测状态是否发生变化
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        req = xhr.responseText.split(" "); // 响应正文
                        v1.querySelector('div').innerText = req[0];
                        v2.querySelector('div').innerText = req[1];
                        v3.querySelector('div').innerText = req[2];
                        v4.querySelector('div').innerText = req[3];
                        v5.querySelector('div').innerText = req[4];
                    } else if (xhr.readyState === 4) {
                        console.error("请求失败，状态码：" + xhr.status);
                    }
                }
                xhr.send("list"); // 向网页服务器发送请求
            }

            // 添加点击事件处理程序
            $('.yq').click(function () {
                var index = $(this).data('index');
                $('.carousel-item').hide();
                $('.carousel-item').eq(index).show();
            });
        });
    </script>
</body>

</html>
